<!-- 主题切换 -->

<template>
  <div class="theme-container glass">
    <div class="theme-mode">
      <Transition
        enter-active-class="animate__animated animate__zoomInRight"
        leave-active-class="animate__animated animate__zoomOutLeft"
      >
        <img v-if="theme" src="../../../assets/icons/moon.svg" alt="" />
        <img v-else src="../../../assets/icons/sun.svg" alt="" />
      </Transition>
    </div>

    <label class="switch">
      <input type="checkbox" v-model="theme" @change="handleTheme" />
      <div class="slider"></div>
      <div class="text">Light</div>
      <div class="text">Dark</div>
    </label>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { EStorageKey } from "../../../utils";
import { getStorageData, setStorageData } from "../../../Background/storage";

const theme = ref<boolean>(false);
const handleTheme = (e: Event) => {
  const { checked } = e.target as HTMLInputElement;
  const themeValue = checked ? "dark" : "light";
  setStorageData(EStorageKey.theme, themeValue);
  setTheme(themeValue);
};

const setTheme = (value: "dark" | "light") => {
  const html = document.querySelector("html");
  html?.setAttribute("theme", value);
};

const init = async () => {
  let localData = await getStorageData(EStorageKey.theme);
  if (localData) {
    theme.value = localData === "dark";
    const themeValue = theme.value ? "dark" : "light";
    setTheme(themeValue);
  }
};
init();

chrome.storage.onChanged.addListener(function (changes) {
  for (let [key, { newValue }] of Object.entries(changes)) {
    if (key === EStorageKey.theme) {
      theme.value = newValue === "dark";
      setTheme(newValue);
    }
  }
});
</script>

<style lang="scss" scoped>
@import "../../style/function.scss";

.theme-container {
  height: auto;
  display: flex;
  flex-direction: column;
  position: absolute;
  border-radius: size();
  padding: size();
  gap: size();

  position: fixed;
  right: size();
  top: size();

  .switch {
    width: 140px;
    height: 30px;
    background-color: var(--nature-bg-2);
    border-radius: 9999px;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;

    input {
      display: none;

      &:checked {
        & ~ .slider {
          transform: translateX(100%);
        }
      }
    }

    .text {
      width: 50%;
      text-align: center;
      font-size: 14px;
      z-index: 2;
    }

    .slider {
      position: absolute;
      width: 50%;
      height: 100%;
      background-color: var(--nature-bg-1);
      z-index: 1;
      cursor: pointer;
      border-radius: 9999px;
      transition: animate(transform, bounce);
      transform: translateX(0%);
      text-align: center;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .theme-mode {
    position: relative;
    height: size(5);

    img {
      height: 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      transform-origin: center;
    }
  }
}
</style>
